import { Ajax } from "@/api/api";
import React, { FC, useEffect, useState, useCallback } from "react";
import { Button, Carousel } from "antd";
import { history } from "umi";
import Dao from '@/components/Dao'
import { useGetYearWeek } from '@/hooks/useGetYearWeek'
import { useLocalStorageState } from "ahooks";

const Guide: FC<{}> = () => {
    const [banners, setBanners] = useState<any>([])
    const [week] = useGetYearWeek()
    const testApi = async () => {
        let res = await Ajax.getTestApi()
    }

    const getBannerData = async () => {
        let res: any = await Ajax.getBanner()
        if (res.code == 200) {
            setBanners(res.banners)
        }
    }

    const [localWeek, setLocalWeek] = useLocalStorageState<string | any>(
        'localWeek',
        {},
    )

    const toChooseGoWhere = useCallback(() => {
        if (localWeek) {
            if (localWeek == week) {
                history.push('/login')
            } else {
                setLocalWeek(week)
            }
        } else {
            setLocalWeek(week)
        }
    }, [])

    useEffect(() => {
        toChooseGoWhere()
        getBannerData()
    }, [])

    return (
        <div style={{ width: '100%', height: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
            <div className="sbox" style={{ position: 'relative', width: '60%', height: '550px', border: '1px solid #ddd', borderRadius: '10px', marginTop: 80 }}>
                <Carousel style={{ width: '100%', height: '100%' }} autoplay={true}>
                    {
                        banners.map((item: any, index: any) => {
                            return (
                                <div key={index} style={{ width: '100%', height: '100%', position: 'relative' }}>
                                    <img src={item.imageUrl} style={{ width: '100%', height: '550px' }} alt="" />
                                </div>
                            )
                        })
                    }
                </Carousel>
                <Dao
                    next={() => { history.push('/login') }}
                    type={false}
                    interval={3000}
                    speed={5}
                    style={{ position: 'absolute', top: 20, right: 20 }}
                />
            </div>
            <Button onClick={() => history.push('/login')} type='primary' style={{ marginTop: 20 }}>进入管理系统</Button>
        </div>
    )
}

export default Guide